<template>
 <div class="Cart_Box">
   <div class="Tabs_Box">
<van-tabs class="tabs" v-model="active">
  <van-tab title="标签 1">

       <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    
      <van-swipe-cell v-for="(itme,index) in listData" :key="index">
 <van-card
  :num="itme.stepper"
  :price="itme.Money"
  :desc="itme.address"
  :title="itme.Title"
  :thumb="itme.Img"
  
> 
 <template #tags>
    <!-- <van-icon name="checked" /> -->
     <van-icon @click="IconTypeFunction(itme.checked,index) " class="Iconback" :name="itme.checked" />

  
  </template> 
<template #footer>

 <div class="stepper" >
   <!-- <button :style="FontColor" type="button" disabled="disabled" class="stepper_ButtomAdd"> + </button> <span class="stepper_Number">{{steppers}}</span>  <button class="stepper_end"> - </button> -->

<van-stepper v-model="itme.steppers" min='1' max='5'  @change="onChange(index,itme.steppers)" @plus="addNumber(itme.checked,index)" @minus="End(itme.checked,index)"/>
 </div>

  </template>
</van-card>
  <template #right>
    <van-button
      square
      text="删除"
      type="danger"
      class="delete-button"
    />
  </template>
</van-swipe-cell>
   

  </van-list>
</van-pull-refresh> 
<van-submit-bar
  :price="price"
  decimal-length='1'
  button-text="提交订单"
  @submit="onSubmit"
>
  <van-checkbox v-model="value" @click="AllChecked" >全选</van-checkbox>
    <template #tip>
        你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
    </template>
</van-submit-bar>
  </van-tab>
  <van-tab title="标签 2">内容 2</van-tab>
  <van-tab title="标签 3">内容 3</van-tab>
  <van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
   </div>

 </div>
</template>
<script>
         
export default {
  data(){ 

   return {

 disabled:false,
 list: [],
      loading: false,
      finished: false,
      refreshing: false,
      A:5,
      active:0,
      listData:[],
      value:false,
      price:0,
      mantissa:0,
      stepper:0,
      FontColor:"color:#ccc;"
 
   }
  },
 components: {

 },
  beforeCreate:function (){

// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

 
  },
 created:function (){
this.$store.state.Title = "购物车"
 // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，el 属性目前尚不可用。

 
  },
  beforeMount:function (){

  },
watch:{
  stepper(val,endval){
   alert(val,endval)

  }
},
  

  methods: {

// 在挂载开始之前被调用：相关的 render 函数首次被调用。


  onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;
        const THIS = this;
        this.axios
        .get(THIS.pathuiL + "MyShoppingCart?usersid="+1)
        .then(function(response) {
           THIS.listData = response.data
           console.log(THIS.listData)
        })
        .catch(function(err) {
          console.log(err);
        });

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // 单选
      IconTypeFunction(checked, index) {
      
      if (this.listData[index].checked === "circle") {
       
        this.listData[index].checked = "checked";
         console.log( "ok",this.steppers);
        this.price += Number(this.listData[index].Money * this.listData[index].stepper*100 );
        // for (let index = 0; index < this.listData.length; index++) {
        //      if( this.listData[index].checked !='checked'){
        //       continue
        //      }else{
        //        this.value=true
        //      }
          
        // }
   
      } else {
   

        this.listData[index].checked = "circle";
        this.value = false
        // console.log(this.listData[index].checked );
        this.price -= Number(this.listData[index].Money *this.listData[index].stepper*100);
      }
      // console.log("ok",index,this.listData[index].checked)
 

    },
    // 立即支付
    onSubmit(e){
      console.log(e)
    },
    // 修改地址
    onClickEditAddress(){

    },
     onChange(index,value) {//进步器的value值变化时触发
      // this.Toast.loading({ forbidClick: true });
        console.log(value)
     this.stepper = value
     this.listData[index].stepper = value
    //  console.log()
    

    },
    addNumber(checked,index){//增加视频
     if(checked=="checked"){
      //  选中显示实际价格
      console.log(this.price,this.listData[index].Money)
         this.price += Number(this.listData[index].Money*100) 
     }

    },
    End(checked,index){ //减少视频
       if(checked=="checked"){
      //  选中显示实际价格
      console.log(this.price,this.listData[index].Money)
         this.price -= Number(this.listData[index].Money*100) 
     }
    },
    //全选
    AllChecked(){
      this.value=!this.value
      if(this.value){
            for (let index = 0; index < this.listData.length; index++) {
             if(this.listData[index].checked==='checked'){
                    continue;
  
             }else{
                this.price += Number(this.listData[index].Money*100) 
                 this.listData[index].checked = 'checked'
             }
             
      // console.log(index)
      
    }
      }else{
        for (let index = 0; index < this.listData.length; index++) {
        if( this.listData[index].checked==='circle'){
             continue;
        }else{
          let num = 1.0;
this.price =  num
                   this.listData[index].checked = "circle"   
        }
            
            
          
                   
     
      // console.log(index)
      
    }
      }

    }


  }

}

</script>

<style lang="scss"  scope>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.Cart_Box {
    flex: 1;
  // overflow-x: hidden;
  background-color: cornsilk;
  display: flex;
  flex-direction: column;
  height: 100%;

}
.Tabs_Box {
  display: flex;
   width: 100%;
   height: calc(100% - 2.6rem);
  flex-direction: column;
  background-color: chocolate;
    position: relative;
}
.tabs {
  display: flex;
  height: 100%;
  flex-direction: column;

}
.van-tabs__content {
display: flex;
// flex: 1;
flex-direction: column;
background-color: black;
height: 100%;
overflow-x: hidden;
}
.van-pull-refresh {
 display: flex;
 flex: 1;
 flex-direction: column;
}
.van-pull-refresh__track {
  width: 100%;
  height: 100%;

}
.van-list{
 width: 100%;
 height: 100%;
 overflow-x: hidden;
}
.van-tab__pane {
  display: flex;
  flex: 1;
  flex-direction:column;
}

.Iconback{
  color: red;
  font-size: 0.8rem;
  margin-left: 5.7rem;
}
.van-swipe-cell {
  margin-top: 0.2rem ;
}
.van-submit-bar {
   bottom:1.11rem;
}
.stepper{
  width: 100%;
  height: 0.5rem;
  // background-color: rgba(1, 2, 3, 0.8)
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.stepper_ButtomAdd,.stepper_end {
  // border: #ffffff;
  width: 0.5rem;
  height: 0.5rem;
  
  text-align: center;
  font-size: 0.5rem;
  padding: 0;
  margin-right: 0.4rem;
 
}
.stepper_end  {
 margin-left: 0.4rem;
}
</style>